<template>
    <div>
        <div class="search-con search-con-top">
            订单号：
            <Input v-model="searchData.order_sn" style="width: 200px"></Input>
            手机号：
            <Input v-model="searchData.mobile" style="width: 200px"></Input>
            变更类型：
            <Select v-model="searchData.type" style="width:200px">
                <Option v-for="(item, index) in typeList" :value="index" :key="index">{{ item }}</Option>
            </Select>
            <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px;">搜索</Button>
            <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">重置</Button>
        </div>
        <br>
        <Table :columns="columns" :data="list" @on-sort-change="customSort" :highlight-row="true" max-height="800" border
            stripe>
        </Table>
        <br>
        <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
        </Paginate>
    </div>
</template>

<script>
import config from "@/config";
import Paginate from "@/components/paginate/paginate.vue";
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
export default {
    name: "balanceChangeRecord",
    components: {
        Paginate,
    },
    data() {
        return {
            // 列表
            columns: [
                {
                    title: '订单号',
                    align: "center",
                    key: 'order_sn',
                },
                {
                    title: '用户名称',
                    align: "center",
                    key: 'nick',
                },
                {
                    title: '用户手机号',
                    align: "center",
                    key: 'mobile',
                },
                {
                    title: '变更类型',
                    align: "center",
                    key: 'remark',
                },
                {
                    title: '变更前',
                    align: "center",
                    key: 'before',
                },
                {
                    title: '金额',
                    align: "center",
                    key: 'amount',
                },
                {
                    title: '变更后',
                    align: "center",
                    key: 'after',
                },
                {
                    title: '创建时间',
                    align: "center",
                    key: 'create_time',
                },
                // {
                //     title: '操作',
                //     key: 'make',
                //     slot: 'memberSlot',
                //     minWidth: 100,
                // },
            ],
            // 数据
            list: [],
            total: 0,
            searchData: {
                page: 1,
                limit: 10,
            },
            showAdd: false,
            // 管理信息
            deliveryInfo: {
                id: 0,
                delivery_company: "",
                delivery_no: "",
            },
            typeList: [],
        }
    },
    methods: {
        getList() {
            const param = {
                ...this.searchData
            };
            this.$axios('/admin/finance/getBalanceList', param).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        search() {
            this.searchData.page = 1;
            this.getList();
        },
        reset() {
            this.searchData = {
                page: 1,
                limit: 10,
            };
            this.getList();
        },
        customSort(column, key, order) {
            this.searchData.order_by = column.key;
            this.searchData.sort = column.order;
            this.getList();
        },
        changePage(page) {
            this.searchData.page = page;
            this.getList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getList();
        },
        // 显示添加角色弹窗
        showAddRoleDrawer(row) {
            this.showAdd = true;
            this.deliveryInfo.id = row.id
        },
        // 添加角色
        submit() {
            const params = {
                ...this.deliveryInfo
            };
            this.$axios('/admin/product/sendGoods', params).then(res => {
                this.$Message.success('发货成功');
                this.showAdd = false;
                this.getList();
            })
        },
        // 获取类型列表
        getTypeList() {
            this.$axios('/admin/finance/getBalanceType').then(res => {
                this.typeList = res;
            });
        },
    },
    created() {
        this.getList();
        this.getTypeList();
    }
}
</script>

<style>
.inputMaxWidth {
    max-width: 180px;
    margin-left: 10px;
}
</style>
